<template>
    <div class="shoy">
        <mt-swipe :auto="4000">
            <mt-swipe-item v-for="img in imgL" :key="img">
                <img :src="img" alt="图片">
                </mt-swipe-item>
        </mt-swipe>
        <ul class="mui-table-view mui-grid-view mui-grid-9 ul-hove">
		    <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
                <router-link to="/shoy/page?mkname=novel">
		            <img src="../../assets/j1.jpg" alt="">
		            <div class="mui-media-body">文字小说</div>
                </router-link>
            </li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
                <router-link to="/shoy/page?mkname=chil">
		            <img src="../../assets/j2.jpg" alt="">
		            <div class="mui-media-body">童书</div>
                </router-link>
            </li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
                <router-link to="/shoy/page?mkname=art">
		            <img src="../../assets/j3.jpg" alt="">
		            <div class="mui-media-body">教材辅导</div>
                </router-link>
            </li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
                <router-link to="/shoy/page?mkname=chil">
		            <img src="../../assets/j4.jpg" alt="">
		            <div class="mui-media-body">人文科社</div>
                </router-link>
            </li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
                <router-link to="/shoy/page?mkname=novel">
		            <img src="../../assets/j5.jpg" alt="">
		            <div class="mui-media-body">经营励志</div>
                </router-link>
            </li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
                <router-link to="/shoy/page?mkname=art">
		            <img src="../../assets/j6.jpg" alt="">
		            <div class="mui-media-body">艺术</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
                <router-link to="/shoy/page?mkname=novel">
		            <img src="../../assets/j7.jpg" alt="">
		            <div class="mui-media-body">IT科技</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
                <router-link to="/shoy/page?mkname=chil">
		            <img src="../../assets/j8.jpg" alt="">
		            <div class="mui-media-body">文娱</div>
                </router-link>
            </li>
		</ul>
        <div class="reco">
            <img class="fouimg" src="../../assets/t1.jpg" alt="为你推荐">
            <nut-row class="reco-hed">
                <nut-col :span="6">
                    <router-link to="/shoy/recot">推荐</router-link>
                </nut-col>
                <nut-col :span="6">
                    <router-link to="/shoy/shoyreco">排行</router-link>
                </nut-col>
                <nut-col :span="6">
                    <router-link to="/shoy/burst">爆款</router-link>
                </nut-col>
                <nut-col :span="6">
                    <router-link to="/shoy/selling">热卖</router-link>
                </nut-col>
            </nut-row>
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
import l1 from '../../assets/l1.jpg'
import l2 from '../../assets/l2.jpg'
import l3 from '../../assets/l3.jpg'
export default {
    name: "shoy",
    data() {
        return{
            imgL:[l1, l2, l3]   //存放图片地址的数组
        }
    }
}
</script>

<style scoped>
    .mint-swipe{
        height: 200px;
    }
    .mint-swipe-item img{
        width: 100%;
        height: 100%;
    }
    .mui-grid-view{
        background-color: #ffffff;
    }
    .mui-media-body{
        font-size: 14px !important;
    }
    .mui-media img{
        width: 45px;
        height: 45px;
    }
    .reco-hed{
        text-align: center;
        padding: 10px;
        background-color: #ffffff;
    }
    .reco-hed a{
        display: inline-block;
        width: 50px;
        padding: 3px;
        font-size: 14px;
        border-radius: 20px;
        color: black;
    }
    .fouimg{
        width: 100%;
        height: 100%;
    }
    .router-link-exact-active{
        background-color: red !important;
        color: #ffffff !important;
    }
    /* .v-enter {
        opacity: 0;
        transform: translateX(100%);
    }
    .v-leave-to{
        transform: translateX(-100%);
    }
    .v-enter-active, .v-leave-active {
        transition: all 0.6s ease;
        position: absolute;
    } */
</style>

